<!--
 * @Author: huang liang miao 1127255342@qq.com
 * @Date: 2024-11-22 14:00:31
 * @LastEditors: huang liang miao 1127255342@qq.com
 * @LastEditTime: 2025-01-13 16:18:48
 * @FilePath: \sr_system_manager_ui\src\components\AchievementDetails\index.vue
 * @Description: 积分/奖励/科研分 详情
-->
<script setup lang="ts">
import useUserStore from '@/store/modules/user'
import { achvTypeList } from "@/utils/typeList"
import {columns} from './index'
import { skipType } from "@/utils/achievementSkipType"
import { getCheckResultDetail } from "@/api/resultsManagement/assessmentReward/index"
import Edit from './Edit.vue'

const props = defineProps({
  showBtn: {
    type: Boolean, // 是否显示去添加按钮
    default: false,
  },
  labeType: {
    type: Number, // 1、显示酬金， 2、显示奖励积分
    default: 1,
  },
  scoreType: {
    type: Number, // 1、科研分， 2、奖励积分
    default: 1,
  },
})

const router = useRouter()
const userStore = useUserStore()
const route = useRoute()
const visible = ref(false)
const score = ref() // 分数
const idCareSee = ref(false) // 身份证是否遮挡
const curId = ref() // 当前行id
const details = ref() // 全部信息
const researchScoreTitle = props.scoreType === 1 ? '科研分' : '奖励积分'
const researchScoreProps = props.scoreType === 1 ? 'researchScore' : 'rewardScore'

const userId = computed(() => {
	return route.query.id
})

const tableColumnsTypeList = columns(researchScoreTitle, researchScoreProps, userStore.currentIdentityCode === 'NORMAL')

// 查询列表
const { run: getCheckResult, loading } = useRequest(getCheckResultDetail, {
  // false 为自动执行
  manual: true,
  // 请求成功
  onSuccess: (data) => {
    details.value = data || []
  },
})

onSearch()
function onSearch() {
  getCheckResult({
    accountId: userId.value || userStore.id,
    rewardFlag: route.query.rewardFlag ? JSON.parse(route.query.rewardFlag) : undefined,
    statisticalYear: Number(route.query.year),
  })
}

// 查看详情：成果
function toView(record, achvType) {
  if(userStore.currentIdentityCode === 'NORMAL') {
    // 教职工
    router.push(`/resultsManagement/mine/mine-${skipType(achvType)}/detail?id=${record.id}&mode=preview&readonly=true`)
  } else if(userStore.currentIdentityCode === 'FACULTY_ADMIN') {
      // 院系/部
      router.push(`/resultsManagement/college/college-${skipType(achvType)}/detail?id=${record.id}&mode=preview&readonly=true`)
    } else{
    router.push(`/resultsManagement/office/office-${skipType(achvType)}/detail?id=${record.id}&mode=preview&readonly=true`)
  }
}

// 添加成果
function toAdd(achvType) {
  router.push(`/resultsManagement/mine/mine-${skipType(achvType)}/detail`)
}

// 隐藏身份证
function maskedIdCard(idCard) {
  if (typeof idCard !== 'string' || idCard.length < 8) {
    return idCard; // 如果身份证号码不是字符串或者长度小于8，直接返回原值
  }
  const start = idCard.slice(0, 6); // 取前6位
  const end = idCard.slice(-4); // 取后4位
  const maskedPart = '*'.repeat(idCard.length - 10); // 中间部分替换为星号
  return start + maskedPart + end;
}

// 编辑分数
function toEdit(record){
  visible.value = true
  curId.value = record.id
  score.value = props.scoreType === 1 ? record.researchScore : record.rewardScore
}
function onClose(v){
  if(v){
    onSearch()
  }
  visible.value = false
}

</script>

<template>
  <div v-if="details" class="items">
    <div class="item">
      <div class="title"><span>基本信息</span></div>
      <div class="person-info">
        <div class="image">
          <i class="iconfont icon-morentouxiang text-[#DBDBDB] text-[112px] m-auto" />
          <!-- <el-image src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" alt="" fill="cover" /> -->
        </div>
        <div class="user-info">
          <div>
            <span class="label">姓名</span>
            <span class="text" >{{ details.name }}</span>
          </div>
          <div>
            <span class="label">工号</span>
            <span class="text" >{{ details.code || '-' }}</span>
          </div>
          <div>
            <span class="label">手机号</span>
            <span class="text" >{{ details.phone }}</span>
          </div>
          <div>
            <span class="label">身份证号</span>
            <span class="text" >
              {{ (idCareSee ? details.idcard : maskedIdCard(details.idcard)) || '-'}}
              <template v-if="details.idcard">
                <i v-if="!idCareSee" class="iconfont icon-iconyinzang icon-see" @click="idCareSee = !idCareSee" />
                <i v-else class="iconfont icon-iconxianzhi icon-see" @click="idCareSee = !idCareSee" />
              </template>
            </span>
          </div>
          <div>
            <span class="label">部门</span>
            <span class="text" >{{ details.departmentName }}</span>
          </div>
          <div>
            <span class="label">岗位类型</span>
            <span class="text" >{{ details.positionType || '-' }}</span>
          </div>
          <div :class="{'!w-full': props.labeType === 2}">
            <span class="label">岗位级别</span>
            <span class="text" >{{ details.positionLevel }}</span>
          </div>
          <template v-if="props.labeType === 1">
            <div>
              <span class="label">科研工作量标准</span>
              <span class="text" >{{ details.workloadStandards || '-' }}</span>
            </div>
            <div>
              <span class="label">当前科研工作量总分</span>
              <span class="text" >{{ details.researchTotalScore || '-' }}</span>
            </div>
            <div class="!w-full">
              <span class="label">科研奖励酬金</span>
              <span class="text" >{{ details.payment || '-' }}元</span>
            </div>
          </template>
          <div v-if="props.labeType === 2" class="!w-full">
            <span class="label">奖励积分</span>
            <span class="text" >{{ details.rewardTotalScore || '-' }}</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 表格 -->
    <div v-for="(item, idx) in details.achvInfoResultVOS" :key="idx" class="item">
      <div class="title">
        <span>{{ achvTypeList[item.achvType] }}<span class="tip">{{ item.tip }}</span></span>
        <div>
          <span>总计 {{ (props.scoreType === 1 ? item.researchTypeTotalScore : item.rewardTypeTotalScore) || 0}}分</span>
          <el-button v-if="props.showBtn" type="primary" class="ml-[24px]" @click="toAdd(item.achvType)">去添加</el-button>
        </div>
      </div>
      <div class="table-conent">
        <TableForm :data="details.achvInfoResultVOS[idx]?.detailVOS"
          :columns="tableColumnsTypeList[item.achvType].columns" :auto-height="true" :tableLoading="loading"
          :showToolBar="false">
          <template #default="{record}">
            <el-button v-if="userStore.currentIdentityCode !== 'NORMAL'" link type="primary" @click="toEdit(record)">编辑 </el-button>
            <el-button link type="primary" @click="toView(record, item.achvType)">查看 </el-button>
          </template>
        </TableForm>
      </div>
    </div>

    <!-- 编辑分数 -->
    <Edit v-if="visible" :visible="visible" :researchScoreTitle="researchScoreTitle" :score="score" :curId="curId" :scoreType="props.scoreType" @close="onClose" />
  </div>
</template>

<style lang="scss" scoped>
.item {
  @apply: mt-[8px] mb-[24px];

  &:last-child {
    @apply: mb-0;
  }

  .title {
    @apply: font-700 flex justify-between items-center;

    .tip {
      @apply: font-0 text-[#86909C];
    }
  }

  .person-info {
    @apply: mt-[20px] flex border border-color-[#BEDAFF];

    .image {
      @apply: w-[150px] flex items-center text-center bg-[#F7F8FA] overflow-hidden;

      .el-image {
        @apply: w-full h-full;
      }
    }

    .user-info {
      @apply: flex-1 flex flex-wrap;

      &>div {
        @apply: flex items-center w-[33.33%] leading-[21px] text-[#1D2129] border-b border-color-[#BEDAFF];
        &:last-child{
          @apply: border-0;
        }
      }

      .label {
        @apply: inline-block w-[160px] h-[100%] content-center px-[16px] py-[14px] bg-[#F6FAFF] border-l border-r border-color-[#BEDAFF];
      }
      .text{
        @apply: flex-1 px-[16px] py-[14px];
      }

      .icon-see {
        @apply: text-[#C9CDD4] text-[16px] ml-[12px] cursor-pointer;
      }
    }
  }

  .table-conent {
    @apply: mt-[16px];
  }
}
</style>